<template>
    <div class="main">
        <headNav title="账户信息"></headNav>
        <div>
            <div class="infoRow">
                <span>
                    提现方式
                </span>
                <select v-model="info.settleType">
                     <option :value='1'>微信</option>
                     <option :value='2'>支付宝</option>
                     <option :value='3'>银行卡</option>
                   
                </select>
            </div>
          
            <div class="infoRow"  v-if="info.settleType == 3">
                <span>
                    所属银行
                </span>
                <select v-model="info.bankType">
                    <option v-for="(item, index) in bankList" :key="index" :value="item.bankType">{{item.bankName}}</option>
                </select>
            </div>
            <div class="infoRow" v-if="info.settleType == 3">
                <span>
                    卡号
                </span>
                <span class="infoValue">
                    <input type="text" v-model.trim="info.account" maxlength="30"> 
                </span>
            </div>
            <div class="infoRow"  v-if="info.settleType != 3">
                <span>
                    账号
                </span>
                <span class="infoValue">
                    <input type="text" v-model.trim="info.account" maxlength="30"> 
                </span>
            </div>
            <div class="infoRow">
                <span>
                    真实姓名
                </span>
                <span class="infoValue">
                    <input type="text" v-model.trim="info.accountHolder" maxlength="30">
                </span>
            </div>
            <div class="save" @click="save">
                保存
            </div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import { Group, XInput, Selector } from 'vux'
export default {
    components: {
        headNav, Group, XInput, Selector
    },
    data () {
        return {
            info : {
                settleType: 1,
                bankType: '',
                account: '',
                accountHolder: ''
            },
            bankList: [],
           
        }
    },
    computed: {
        roleCode () {
             return this.$store.state.user.roleCode
        }
    },
    mounted () {
        this.getPerson()   
        this.getBankList()
    },
    methods: {
        save () {
            if (!this.check()) {
                return
            }
            this.updatePerson()
        },
        check () {
            
            if (this.info.settleType == null) {
                this.$vux.toast.text('请选择提现方式')
                return false
            }
            if (this.info.settleType == 3) {
                if (!this.info.bankType) {
                    this.$vux.toast.text('请选择所属银行')
                    return false
                }
            }
            if (!this.info.account) {
                this.$vux.toast.text('账号不能为空')
                return false
            }
            if (!this.info.accountHolder) {
                this.$vux.toast.text('真实姓名不能为空')
                return false
            }
            return true
            
        },
        // 修改个人信息
        updatePerson () {
            delete this.info.withdrawalBalance
            delete this.info.agentName
            this.$store.dispatch('welfareFound/UpdatePerson', this.info).then(
                res => {
                    if (res.status == 200) {
                        this.$nextTick(
                            () => {
                               
                                this.$vux.toast.text('修改成功')
                                this.$router.go(-1)
                            }
                        )
                    }else {
                         this.$vux.toast.text(res.msg)
                    }
                }
            )
        }, 
        // 获取个人信息
        getPerson () {
            this.$store.dispatch('welfareFound/GetPerson').then(
                res => {
                    if (res.status == 200) {
                        this.$nextTick(
                            () => {
                                this.info = res.data
                            }
                        )
                    }
                }
            )
        },
        // 获取银行列表
        getBankList () {
            this.$store.dispatch('welfareFound/GetBankList').then(
                res => {
                    if (res.status == 200) {
                        this.bankList = res.data
                    }
                }
            )
        }
    }
}
</script>
<style lang="less" scoped>
    .main{
        background: #fff;
    }
    .infoRow{
        padding: 0.45rem 0.43rem 0.45rem 0.38rem;
        border-bottom: 0.01rem solid #e5e5e5;
        font-size: 0.3rem;
        overflow: hidden;
        .infoValue{
            float: right;
            input{
                font-size: 0.3rem;
                color: #666;
                text-align: right;
                width: 5rem;
            }
        }
        select{
            float: right;
            border: none;
            font-size: 0.3rem;
            color: #666;
            width: 5rem;
            height: 0.4rem;
            background: #fff;
        }
    }
    .save{
        width: 6.48rem;
        text-align: center;
        color: #128FEF;
        font-size: 0.3rem;
        height: 0.84rem;
        line-height: 0.84rem;
        background: #FFFFFF;
        border: 0.02rem solid #49A8F0;
        border-radius: 0.42rem;
        position: fixed;
        left: 0.36rem;
        bottom: 12%;
    }
</style>
